class ContentDistribution extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.selectResourceList = [];
        this.maxConut = 0;
        this.minConut = 0;
        this.state = {
            list: ''
        }
    }

    layuiInitComplete() {
        this.maxConut = this.props.nodeInfo.resourceType.maxConut;
        this.minConut = this.props.nodeInfo.resourceType.minConut;
        this.form = layui.form();
        this.form.on('checkbox(selectResource)', (data) => {
            let resourceId = data.value, j = -1;
            for (let i in this.selectResourceList) {
                if (this.selectResourceList[i] === resourceId) {
                    j = i;
                    break;
                }
            }

            if (data.elem.checked === true) {
                data.elem.checked = false;
                if (this.maxConut && this.maxConut !== 0 && this.selectResourceList.length > Number(this.maxConut) - 1) {
                    this.form.render('checkbox');
                    let index = layer.confirm('最多只能选择' + this.maxConut + '条资源',
                        {
                            btn: ['确定'] //按钮
                        },
                        () => {
                            layer.close(index);
                        });
                } else {
                    this.assignsResource(resourceId, true, () => {
                        data.elem.checked = true;
                        if (j === -1) {
                            this.selectResourceList.push(resourceId);
                        }
                        this.form.render('checkbox');
                    })
                }
            } else {
                data.elem.checked = true;
                this.assignsResource(resourceId, false, () => {
                    data.elem.checked = false;
                    if (j === -1) {
                        this.selectResourceList.splice(j, 1);
                    }
                    this.form.render('checkbox');
                })
            }
            this.form.render('checkbox');
        });

        this.refs.commGroup.layuiInitComplete();
    }

    selectCommInfoCallback() {
        this.queryList();
    }

    assignsResource(resourceCode, isAssigns, successCallback) {
        let commInfo = this.refs.commGroup.getcurrentCommInfo();
        if (!commInfo.commCode && !commInfo.commGroupId) {
            layer.msg('小区或者小区分组必须选择！', {icon: 5});
            return;
        }
        let param = {};
        param.resourceCode = resourceCode;
        param.commGroupId = commInfo.commGroupId;
        param.commCode = commInfo.commCode;
        param.typeCode = this.props.nodeInfo.resourceType.type_code;
        param.isAssigns = isAssigns;
        postJson('/cms/appResource/assignsResource.x', $.param(param), () => {
            if (successCallback) {
                successCallback();
            } else {
                layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分配成功', {icon: 6});
            }
        })
    }

    submitAssignsResource() {
        let commInfo = this.refs.commGroup.getcurrentCommInfo();
        if (!commInfo.commCode && !commInfo.commGroupId) {
            layer.msg('小区或者小区分组必须选择！', {icon: 5});
            return;
        }

        let param = {};
        param.resourceCodes = this.selectResourceList ? this.selectResourceList.join(',') : '';
        param.commGroupId = commInfo.commGroupId;
        param.commCode = commInfo.commCode;
        param.typeCode = this.props.nodeInfo.resourceType.type_code;
        postJson('/cms/appResource/submitAssignsResource.x', $.param(param), () => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分配成功', {icon: 6});
        })
    }

    queryList() {
        let param = {};
        let commInfo = this.refs.commGroup.getcurrentCommInfo();
        if (!commInfo.commCode && !commInfo.commGroupId) {
            return;
        }
        param.commGroupId = commInfo.commGroupId;
        param.commCode = commInfo.commCode;
        param.type_code = this.props.nodeInfo.resourceType.type_code;
        postJson('/cms/appResource/queryAlreadyResourceList.x', $.param(param), function (data) {
            let list = data.list;
            this.selectResourceList.splice(0, this.selectResourceList.length);
            for (let i in list) {
                this.selectResourceList.push(list[i].parentResourceId);
            }
            param.pageSize = 8;
            //保证通过之后还是在当前页
            param.page = 1;
            param.isDefQueryResource = true;
            param.isApproved = 'Y,R';
            this.updateList(param);
        }.bind(this));
    }

    updateList(param) {
        postJson('/cms/appResource/queryResourceList.x', $.param(param), function (data) {
            this.page = param.page;
            this.setState({
                list: data.data.list
            }, function () {
                this.form.render();
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'contentDistributionPage'
                    , pages: Math.ceil(data.data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    selectResourceView(resourceId, parentResourceId, commCode) {
        if (this.selectResourceList.length > 0) {
            for (let i in this.selectResourceList) {
                if (this.selectResourceList[i] === resourceId || this.selectResourceList[i] === parentResourceId) {
                    return (<input type="checkbox"
                                   name="selectResource"
                                   data-filter="selectResource"
                                   checked={true}
                                   value={resourceId}
                                   disabled={this.props.isAdmin ? commCode !== '0000' : false}
                    />)
                }
            }
        }
        return (<input type="checkbox"
                       name="selectResource"
                       data-filter="selectResource"
                       checked={false}
                       value={resourceId}
                       disabled={this.props.isAdmin ? commCode !== '0000' : false}/>);
    }

    tbody() {
        let commCode = this.refs.commGroup ? this.refs.commGroup.getcurrentCommInfo().commCode : "";
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                        <td>
                            <div className="Center-Container"
                                 style={{border: '1px solid #CDCDC1', width: '70px', height: '50px'}}>
                                <img className="Absolute-Center" style={{'max-height': '90%', 'max-width': '90%'}}
                                     onClick={() => this.props.showImage(array.icon_url)} src={array.icon_url}/>
                            </div>
                        </td>
                        <td>{array.isApproved === 'Y' ? <div style={{color: 'blue'}}>通过审核</div> :
                            <div style={{color: 'red'}}>正在审核（分配后的资源，需要通过审核后才可见！）</div>}</td>
                        <td>{array.title}</td>
                        <td>{array.description}</td>
                        <td>
                            {array.creator}
                        </td>
                        <td>
                            {this.selectResourceView(array.resource_id, array.parentResourceId, commCode)}
                        </td>
                    </tr>
                )
            }.bind(this))
        }
    }

    /*buttonView() {
        if (this.props.isAdmin) {
            let commCode = this.refs.commGroup ? this.refs.commGroup.getcurrentCommInfo().commCode : "";
            if (commCode === '0000') {
                return (<button type="button" className="layui-btn layui-btn-normal"
                                onClick={() => this.submitAssignsResource()}>
                    确定分配内容
                </button>);
            }
        } else {
            return (<button type="button" className="layui-btn layui-btn-normal"
                            onClick={() => this.submitAssignsResource()}>
                确定分配内容
            </button>);
        }
    }*/

    deleteResource(id) {
        layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, function () {
            postJson("/cms/appResource/deleteResource.x", $.param({
                'resource_id': id, 'isNotDeleteOss': false
            }), function (data) {
                this.queryList();
                layer.closeAll();
            }.bind(this));
        }.bind(this));
    }

    render() {
        return <form className="layui-form layui-form-pane" action="">
            <CommGroup ref="commGroup" isAdmin={this.props.isAdmin}
                       selectCommInfoCallback={() => this.selectCommInfoCallback()}/>
            <div className="layui-form-item">
                <div style={{'padding-bottom': '10px'}}>
                    <table className="layui-table">
                        <colgroup>
                            <col width="100"/>
                            <col width="200"/>
                            <col width="200"/>
                            <col/>
                            <col width="100"/>
                            <col width="90"/>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>图片</th>
                            <th>状态</th>
                            <th>标题</th>
                            <th>描述</th>
                            <th>创建人</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        {this.tbody()}
                        </tbody>
                    </table>
                    {/*{this.buttonView()}*/}
                    < div style={{'float': 'right', 'margin-right': '1px'}} id="contentDistributionPage"/>
                </div>
            </div>
        </form>
    }
}
